import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  MeshBasicMaterial,
  IcosahedronBufferGeometry,
  CanvasTexture,
  BufferAttribute,
  Color,
  DirectionalLight,
} from "three";

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let mesh: Mesh;

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 1000;

  scene = new Scene();
  scene.background = new Color('#fff');

  let directionLight = new DirectionalLight('#bbb', 1);
  directionLight.position.set(0, 0, 1);
  scene.add(directionLight);

  //   let geometry = new BoxBufferGeometry(200, 200, 200);
  let radius = 200;
  let geometry = new IcosahedronBufferGeometry(radius, 1);
  let count = geometry.attributes.position.count;
  geometry.setAttribute('color', new BufferAttribute(new Float32Array(count * 3), 3));
  let attrColor = geometry.attributes.color;
  let attrPosition = geometry.attributes.position;
  let color  = new Color();
  for(let i = 0; i < count; i++){
    color.setHSL((attrPosition.getX(i) + 1) / 2, 1.0, 0.5);
    attrColor.setXYZ(i, color.r, color.g, color.b);
  }
  let material = new MeshBasicMaterial({
    color: '#fff',
    vertexColors: true
  });
  let wireframeMaterial = new MeshBasicMaterial({
      color: '#000',
      wireframe: true,
      transparent: true
  })
  mesh = new Mesh(geometry, material);
  let wire = new Mesh(geometry, wireframeMaterial);
  scene.add(mesh);
  scene.add(wire);

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
//   renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}


